<template>
  <div class="gonggao-list-container">
    <div class="page-header">
      <h2>通告管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="goToPublish">发布新通告</el-button>
      </div>
    </div>
    <div>
      <ul>
        <div id="one">
          <div class="one">通告ID</div>
          <div class="two">通告标题</div>
          <div class="two">通告内容</div>
          <div class="san">操作</div>
        </div>
        <li v-for="item in noticeList" :key="item.noticeId">
          <div class="one">{{ item.noticeId }}</div>
          <div class="two">{{ item.title }}</div>
          <div class="two">{{ item.content }}</div>
          <div class="mb-4">
            <el-button type="success" @click="editGonggao(item)">修改</el-button>
            <el-button type="danger" @click="deleteGonggao(item._id)">删除</el-button>
          </div>
        </li>
      </ul>
    </div>

  </div>
  <el-dialog v-model="dialogFormVisible" title="修改公告" width="500px">
    <el-form :model="putlist">
      <el-form-item label="标题" label-width="100px">
        <el-input v-model="putlist.title" autocomplete="off" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="通告内容" label-width="100px">
        <el-input v-model="putlist.content" type="textarea" :rows="6" placeholder="请输入通告内容"></el-input>
      </el-form-item>
      <el-form-item label="通告分类id" label-width="100px">
        <el-select v-model="putlist.categoryId" placeholder="请选择通告分类">
          <el-option v-for="(item) in noticeCateArr" :key="item._id" :label=item.name :value="item._id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="put()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { createDeleteRequest, createListRequest, createPutRequest } from '@/api/gonggao'
import { noticeListRequest, type INoticeListItemRes } from '@/api/fenlei'
// import { it } from 'element-plus/es/locales.mjs'
const dialogFormVisible = ref(false)
const router = useRouter()
//定义一个修改对象
const putlist = ref(
  { categoryId: '', id: '', title: '', content: '' })
// 表格数据
const noticeList = ref([
  { noticeId: '', title: '', content: '', },
])

// const form = reactive({
//   name: '',
//   region: '',
//   content: '',
//   date1: '',
//   date2: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
// })
// 获取通告列表
async function list() {
  const response = await createListRequest()
  console.log(response)
  noticeList.value = response.data.data.list
  console.log('通告列表:', noticeList.value)
}
list()
const noticeCateArr = ref<INoticeListItemRes[]>([])
// 请求通知公告分类的接口数据
async function loadNoticeCate() {
  const res = await noticeListRequest()
  console.log(res.data.data.list)
  //保存分类数据到数组中
  noticeCateArr.value = res.data.data.list
}
loadNoticeCate()
// 编辑通告
function editGonggao(noticeList: string) {
  console.log(noticeList);
  dialogFormVisible.value = true;
  putlist.value = { ...noticeList }
}
function put() {
  console.log(putlist.value);
  createPutRequest(
    putlist.value.title,
    putlist.value.content,
    putlist.value.categoryId,
    putlist.value._id).then(res => {
      if (res.data.code == '200') {
        dialogFormVisible.value = false;
        list()
        ElMessage.success('修改分类成功')
      } else {
        ElMessage.success('修改分类失败')
      }
    })


}


// 删除通告
function deleteGonggao(id: string) {
  createDeleteRequest(id).then(res => {
    console.log(res)
    list();
  })

}
// 跳转到发布通告页面
const goToPublish = () => {
  router.push('/gonggao/publish')
}
</script>

<style lang="css" scoped>
ul #one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #4b4b4b;
  text-align: center;
  align-items: center;
}

li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  height: 50px;
}

.one {
  width: 20%;
  text-align: center;
}

.two {
  width: 25%;
}

.san {
  width: 15%;
}

.gonggao-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.search-bar {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.table-container {
  margin-bottom: 20px;
}
</style>
